<template>
	<view class="course">
		
		<view class="head" :style="[{'padding-top': statusBarH + 'px',}]">
			<view class="back" @tap="back">
				<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
			</view>
			<view class="box">
				<view class="title">教程中心</view>
				<view class="tips">给您提供最完整的教程服务</view>
			</view>
		</view>
		
		<view class="content">
			<view class="tabs">
				<view class="item" :class="{ active: tabsIndex=== 0}" @tap="toggle(0)">
					<uni-icons type="images" size="30" color="#1296db"></uni-icons>
					<view>账户指引</view>
				</view>
				<view class="item" :class="{ active: tabsIndex=== 1}" @tap="toggle(1)">
					<uni-icons type="images" size="30" color="#1296db"></uni-icons>
					<view>合约交易</view>
				</view>
				<view class="item" :class="{ active: tabsIndex=== 2}" @tap="toggle(2)">
					<uni-icons type="images" size="30" color="#1296db"></uni-icons>
					<view>一键跟单</view>
				</view>
				<view class="item" :class="{ active: tabsIndex=== 3}" @tap="toggle(3)">
					<uni-icons type="images" size="30" color="#1296db"></uni-icons>
					<view>币币交易</view>
				</view>
			</view>
			<uni-list class="list">
			     <uni-list-item  title="下载/注册/登录" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			     <uni-list-item  title="注册视频流程" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			     <uni-list-item  title="充提币" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			     <uni-list-item  title="充提币视频教程" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			     <uni-list-item  title="OTC教程" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			     <uni-list-item  title="相关协议" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			     <uni-list-item  title="关于Bitget" link to="/pages/tabbar/tabbar-4/detailed" ></uni-list-item>
			</uni-list>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarH: this.statusBar,  // 状态栏高度
				tabsIndex: 0,
			}
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// tabs 切换
			toggle(index) {
				this.tabsIndex = index
			}
		}
	}
</script>

<style>
page {
	background-color: #f2f3f5;
}
.course .head {
	height: 340rpx;
	background-color: #4772da;
	background-image: url(../../static/img/logo.png);
	background-position-x: 90%;
	background-position-y: 60rpx;
	background-size: 25%;
	background-repeat: no-repeat;
}
.course .head .back {
	height: 80rpx;
	line-height: 80rpx;
	padding-left: 10rpx;
}
.course .head .box {
	padding: 20rpx;
	color: #fff;
}
.course .head .title {
	font-size: 40rpx;
}
.course .head .tips {
	font-size: 26rpx;
}
.course .content {
	width: 700rpx;
	min-height: calc(100vh - 211rpx);
	background-color: #fff;
	margin: -80rpx auto 0rpx;
	border-top-right-radius: 10rpx;
	border-top-left-radius: 10rpx;
}
.course .tabs {
	padding: 40rpx 30rpx 20rpx;
	display: flex;
	text-align: center;
	justify-content: space-between;
}
.course .tabs .item {
	position: relative;
}
.course .tabs .item.active {
	color: #1296DB;
}
.course .tabs .item.active::before {
	content: "";
	width: 100%;
	height: 4rpx;
	background-color: #1296DB;
	position: absolute;
	left: 50%;
	bottom: -20rpx;
	transform: translateX(-50%);
}
.course .tabs .item view {
	font-size: 24rpx;
	margin-top: 10rpx;
}
.course .list >>> .uni-list--border::after,
.course .list >>> .uni-list--border-top,
.course .list >>> .uni-list--border-bottom {
	background-color: rgba(200,199,204,.5);
}
.course .list >>> .uni-list-item__content-title {
	font-size: 26rpx;
}
</style>
